Auth0での認証付きのPiping Serverを立てる
やりたいこと
Auth0はメールアドレスや以下のような様々な既存のアカウントで認証を用意できるサービス。 https://gyazo.com/2f2dfebd864785db5bbb2ba91cad6334
Auth0は無料で7000人のアクティブユーザーまで使える。 できたもの
使い方
サーバーの立て方
code:bash
(--jwt-audienceでaudienceも指定できる)
https://gyazo.com/6f8b21aeaae87fbc5b05410af86dd5c8
クライアントからのリクエスト
HTTPヘッダにAuthorization: Bearer <Auth0のJWT> をつけて (認証付きPiping Server)にリクエストすることで転送できる。 Webクライアントの実装例
以下がAuth0の認証を使ったシンプルなWebクライアントの例のデモ。
https://gyazo.com/38945cb6e24fbcb9d25805a18f2a2075
(SendとGetを同じWebクライアントでやっているのは例だから。離れた場所でもSend/Getできる。)
以下に上記のWebクライアントの全てのソースがある。
ソース中にある以下の部分を自分のAuth0の設定に変更すると良い。 code:js
...
auth0Promise = createAuth0Client({
domain: "nwtgck.us.auth0.com",
client_id: "bsm7sR6J6RnXJZJAklDceLLf9zz0bqiX",
cacheLocation: 'localstorage',
// audience: '...'
});
...
上記はaudience: を指定していないため Authorization: Bearer <Auth0のJWT> に指定するJWTの文字列は(await auth0.getIdTokenClaims()).__rawで取得した。
(const auth0 = await auth0Promise;とする)
audience: を指定するとawait auth0.getTokenSilently()で取得した文字列を<Auth0のJWT>に指定できた。
上記のindex.htmlがある場所で以下のコマンドなどでWebクライアントを静的ホスティングして使える。
code:bash
# Static hosting
python3 -m http.server 3000
に上記のシンプルなWebクライアントが立ち上がる。 Auth0の設定は以下の「Allowed Callback URLs」、「Allowed Logout URLs」、「Allowed Web Origins」を変更している。 https://gyazo.com/fe505ebe287c1b436940c32bbfc24567
この に立てたWebクライアントはあくまでも一枚のHTMLで出来た例。 おまけ